<script setup lang="ts" name="B29PiniaCounter">
type OpType = "+" | "-";

import { ref } from "vue";
import { useCounterStore } from "../../store/counter";

const counterStore = useCounterStore();

const step = ref(1);

const incrementCounter = (op: OpType) => {
  const stepValue = step.value;
  if (op === "-") {
    // 第一种修改方式
    counterStore.counter -= stepValue;
    return;
  }
  // 第二种修改方式(尤其适用于批量修改)
  //const currentCounter = counterStore.counter;
  //counterStore.$patch({ counter: currentCounter + stepValue });

  // 第三种方式
  counterStore.increment(stepValue);
};
</script>

<template>
  <div class="bg-sky-200 rounded-md p-3 border shadow flex flex-col gap-y-3">
    <div class="text-lg font-semibold">
      当前求和为：{{ counterStore.counter }}
    </div>
    <div class="flex item-center gap-x-2">
      <select class="border border-gray-400 px-1 py-0.5 bg-gray-100" v-model.number="step">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button class="border border-gray-400 px-1 py-0.5 bg-gray-100" @click="incrementCounter('+')">
        加
      </button>
      <button class="border border-gray-400 px-1 py-0.5 bg-gray-100" @click="incrementCounter('-')">
        减
      </button>
    </div>
  </div>
</template>
